<script setup>
import rftitle from './rftitle.vue'
import { left4List } from '../pages/home/index'

console.log(left4List.value, 'left4List')
</script>

<template>
  <rftitle class="mb-[30px]" title="水系统"></rftitle>

  <div class="w-[368px] h-[128px] box flex mb-[40px]" :class="item.box" v-for="(item, index) in left4List" :key="index">
    <div class="mx-[24px] relative mt-[65px]">
      <img class="w-[88px] h-[28px]" src="../assets/four/3222.png" alt="">
      <img class="w-[40px] h-[40px] absolute mt-[-30px] left-[24px]" src="../assets/four/3221.png" alt="">
    </div>
    <div class="mt-[42px]">
      <div class="text-white text-[16px] mb-[16px]">{{ item.name }}</div>
      <div class=" text-[14px]" style="color: #999999;">运行状态：<span class="ml-[8px]"
          :style="item.type == 1 ? 'color: #00AAFF;' : ''">{{ item.type == 1 ? '启动' : '未启动' }}</span>
      </div>
    </div>
  </div>






</template>

<style scoped>
.box {
  background-image: url(../assets/four/3223.png);
  background-size: 100% 100%;
}

.box1 {
  background-image: url(../assets/four/3224.png);
  background-size: 100% 100%;
}
</style>
